<template>
    <div class="px">
        <el-card>
            <div slot="header" class="clearfix">
                <span>在线报名</span>
                <el-button type="primary"
                           size="mini"
                           icon="el-icon-arrow-left"
                           @click="$router.go(-1)"
                           style="float: right;">返回
                </el-button>
            </div>
            <div>
                <div style="margin: 15px 50px 30px">
                    <el-steps :active="active" finish-status="success" align-center>
                        <el-step title="确认信息"></el-step>
                        <el-step title="签字"></el-step>
                        <el-step title="提交"></el-step>
                    </el-steps>
                </div>
                <el-row :gutter="20">

                    <el-col :span="18">
                        <div>
                            <el-card v-show="active===0" class="box-card">
                                <div slot="header" class="clearfix">
                                    <span>确认信息</span>
                                </div>
                                <div>
                                    <el-form :inline="true" ref="elForm" :model="formData" size="medium"
                                             label-width="90px"
                                             label-position="right">
                                        <el-form-item label="姓名" prop="name">
                                            <el-input v-model="formData.trueName" placeholder="请输入姓名" clearable
                                                      :style="{width: '100%'}"></el-input>
                                        </el-form-item>
                                        <el-form-item class="text" label="性别">
                                            <el-select v-model="formData.gender"
                                                       size="small"
                                                       placeholder="请选择性别"
                                            >
                                                <el-option
                                                        v-for="item in gender"
                                                        :key="item.valueId"
                                                        :label="item.valueName"
                                                        :value="item.valueId">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="身份证号码" prop="idCard">
                                            <el-input v-model="formData.idCard" placeholder="请输入身份证号码" show-word-limit
                                                      clearable
                                                      :style="{width: '100%'}"></el-input>
                                        </el-form-item>
                                        <el-form-item label="手机号码" prop="phone">
                                            <el-input v-model="formData.phone" placeholder="请输入手机号码" clearable
                                                      :style="{width: '100%'}">
                                            </el-input>
                                        </el-form-item>
                                        <el-form-item label="头像上传">
                                            <el-upload
                                                    drag
                                                    :headers="{
                    'Authorization': token
                    }"
                                                    name="file"
                                                    class="upload-demo"
                                                    :on-success="uploadSuccess"
                                                    :on-error="uploadError"
                                                    :action="uploadPath"
                                            >
                                                <i class="el-icon-upload"></i>
                                                <div class="el-upload__text">将电子照片拖到此处，或<em>点击上传</em></div>
                                                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                                            </el-upload>
                                        </el-form-item>
                                        <el-form-item size="large" align="center">
                                            <div class="block">
                                                <el-image :src="hxHead" class="zjz">
                                                </el-image>
                                            </div>
                                        </el-form-item>

                                        <div style="text-align: center;">
                                            <el-form-item size="large" align="center">
                                                <el-button icon="el-icon-arrow-right" type="primary" @click="next">下一步
                                                </el-button>
                                            </el-form-item>
                                        </div>
                                    </el-form>
                                </div>

                            </el-card>

                            <el-card v-show="active===1" class="box-card">
                                <div slot="header" class="clearfix">
                                    <span>签字确认</span>
                                </div>

                                <div>
                                    <vue-esign
                                            style="margin: 0 auto"
                                            ref="esign" :width="900" :height="300" :isCrop="isCrop"
                                            :lineWidth="lineWidth"
                                            :lineColor="lineColor" :bgColor.sync="bgColor"/>
                                </div>
                                <div style="text-align: center;margin-top: 15px;">
                                    <el-button icon="el-icon-arrow-right" type="primary" @click="handleGenerate">下一步
                                    </el-button>
                                    <el-button icon="el-icon-refresh" @click="handleReset">清空</el-button>
                                </div>
                            </el-card>
                            <el-card v-show="active===2" class="box-card">
                                <div slot="header" class="clearfix">
                                    <span>结果</span>
                                </div>
                                <div v-if="success" style="text-align: center;color: #2ecc71;">
                                    <i style="font-size: 250px" class="el-icon-circle-check"></i>
                                    <h1>报名成功！</h1>
                                </div>
                                <div v-else style="text-align: center;color: #F56C6C;">
                                    <i style="font-size: 250px" class="el-icon-circle-close"></i>
                                    <h1>抱歉，报名失败！</h1>
                                </div>
                                <div style="text-align: center;">
                                    <el-button icon="el-icon-position" :type="success?'success':'danger'"
                                               @click="goBack">确定
                                    </el-button>
                                </div>
                            </el-card>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div>
                            <selfCard/>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>
    </div>
</template>

<script>
    import selfCard from "../../../self/selfCard";
    import {getApiPath, getToken, getupLoadPath} from "../../../../utils/common";
    import {examRegistration} from "../../../../api/examination";
    import {queryByTypeCode} from "../../../../api/dictionary";

    export default {
        data() {
            return {
                active: 0,
                userInfo: {},
                formData: {
                    examId: 0,
                    trueName: "",
                    username: "",
                    gender: "",
                    idCard: '',
                    phone: "",
                    head: "",
                    userSign: ""
                },
                token: "",
                uploadPath: "",
                hxHead: require("../../../../assets/zjz2.png"),
                success: true,
                gender: [],
                lineWidth: 6,
                lineColor: '#000000',
                bgColor: '',
                isCrop: false

            };
        },
        components: {
            selfCard
        },
        mounted() {
            this.initData();
            this.uploadInit();
        },
        methods: {
            next() {
                if (this.active++ > 2) this.active = 0;
            },
            async initData() {
                let user = this.$store.state.user
                this.formData.examId = this.$route.query.id
                this.formData.trueName = user.name;
                this.formData.username = user.username;
                this.formData.idCard = user.idCard;
                this.formData.phone = user.phone;
                this.formData.gender = user.gender;
                this.userInfo = user

                let resp = await queryByTypeCode("gender");
                this.gender = resp.data
            },
            uploadInit() {
                let api = getApiPath();
                this.token = getToken();
                this.uploadPath = api + 'system/picUpload';
            },
            uploadSuccess(resp) {
                if (resp.code === 200) {
                    this.formData.head = resp.data
                    this.$message.success("证件照上传成功！")
                    this.hxHead = getupLoadPath() + this.formData.head
                } else {
                    this.$message.error('证件照上传失败')
                }
            },
            uploadError(e) {
                this.$message.error('证件照上传失败')
            },
            goBack() {
                this.$router.go(-1)
            },
            handleReset() {
                this.$refs['esign'].reset() //清空画布
            },
            handleGenerate() {
                this.$refs['esign'].generate().then(res => {
                    this.formData.userSign = res // 得到了签字生成的base64图片
                    this.submit();
                }).catch(err => { //  没有签名，点击生成图片时调用
                    this.$message({
                        message: ' 未签名！',
                        type: 'warning'
                    })
                })
            },
            async submit() {
                console.log(this.formData)
                let resp = await examRegistration(this.formData);
                if (resp.code === 200) {
                    this.$message.success('提交成功')
                    this.success = true;
                } else {
                    this.$message.error("提交失败：" + resp.message)
                    this.success = false;
                }
                this.next()
            }
        }
    }
</script>

<style scoped lang="scss">
    .el-upload__tip {
        line-height: 1.2;
    }

</style>

